<script setup>
/**
 * 实体店酒店评论
 * **/
import { ref, onMounted, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import { getShopEvaluateListByItemId, deleteShopEvaluate } from '@/server/api/Confirm'
import { useUseStore } from '@/stores/user'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const use = useUseStore()

const route = useRoute()

const CommentCount = ref(0)// 评论数量
const CommentList = ref([])//商品评论列表
const shopId = ref()
// 删除评论
const Delete = (evaluateId) => {
    console.log(evaluateId);
    console.log(use.userId);

    deleteShopEvaluate(evaluateId, use.userId).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
            // 根据实体店id获取实体店评价列表
            getShopEvaluateListByItemId(1, 10, shopId.value).then((res) => {
                console.log(res.data.data);
                CommentCount.value = res.data.data.count
                CommentList.value = res.data.data.list
            })
        }
    })
}
onBeforeMount(() => {
    shopId.value = route.query.shopId
    console.log(shopId.value);
})
onMounted(() => {
    // 根据实体店id获取实体店评价列表
    getShopEvaluateListByItemId(1, 20, shopId.value).then((res) => {
        console.log(res.data.data);
        CommentCount.value = res.data.data.count
        CommentList.value = res.data.data.list
    })
})
</script>

<template>
    <div class="contain">
        <!-- 导航栏 -->
        <div class="nav">
            <div class="left" @click="$router.back()">
                <img src="/images/cart/back.png">
            </div>
            <div class="title">{{ $t('allComment') }}
                ({{ CommentCount > 99 ? '99+' : CommentCount }})
            </div>
        </div>
        <!-- 占位 -->
        <div class="Placeholder1"></div>

        <!-- 全部评论 -->
        <div class="commentBox">
            <div class="allComment">{{ $t('allComment') }}<span>{{ CommentCount }}</span></div>
            <!-- 评论列表 -->
            <div class="commentItem" v-for="(item) of CommentList" :key="item.evaluateId">
                <div class="top">
                    <img :src="use.ing + item.userImage" alt="">
                    <div class="right">
                        <div class="nickName">{{ item.userName }}</div>
                        <div class="time">{{ item.createTime }}</div>
                    </div>
                </div>
                <div class="commentContent">
                    <p>{{ item.evaluate }}</p>
                </div>
                <!-- <div class="delete" v-if="item.userId == use.userId" @click.stop="Delete(item.evaluateId)">ⅹ</div> -->
                <div class="delete" v-if="item.userId == use.userId" @click.stop="Delete(item.evaluateId)">X</div>
            </div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
// 容器
.contain {
    width: 100vw;
    min-height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    font-family: 'PingFang SC';
}

// 导航栏
.nav {
    width: 360rem;
    height: 24rem;
    padding: 56rem 16rem 24rem;
    display: flex;
    position: fixed;
    z-index: 999;
    background-color: rgba(255, 255, 255, 1);

    .left {
        width: 24rem;
        height: 24rem;
        line-height: 24rem;
        text-align: center;


        img {
            width: 6rem;
            height: 12rem;
        }
    }

    .title {
        height: 28rem;
        margin-left: 117rem;
        font-size: 16rem;
        font-weight: 500;
        line-height: 28rem;
        text-align: center;
        color: rgba(102, 102, 102, 1);

    }
}

// 占位
.Placeholder1 {
    height: 104rem;
}

// 商品信息
.CommodityInfo {
    width: 390rem;
    height: 98rem;
    background: rgba(245, 245, 245, 1);
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 999;

    img {
        width: 64rem;
        height: 74rem;
        border-radius: 8rem;
        margin: 12rem 12rem 12rem 24rem;
    }

    .box {
        width: 290rem;
        height: 74rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;

        .title {
            width: 258rem;
            height: 22rem;
            font-size: 16rem;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
        }

        .walk {
            font-size: 13rem;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
        }

        .price {
            font-size: 14rem;
            font-weight: 500;
            color: rgba(153, 153, 153, 1);

            span {
                font-size: 14rem;
                font-weight: 500;
                color: rgba(100, 46, 142, 1);
                margin-left: 4rem;
            }
        }

        .sale {
            position: absolute;
            right: 24rem;
            bottom: 0;
            font-size: 12rem;
            font-weight: 400;
            color: rgba(204, 204, 204, 1);
        }
    }
}

// 全部评论
.commentBox {
    width: 358rem;
    margin-left: 16rem;
    // min-height: calc(100vh - 202rem);
    padding-bottom: 50rem;

    .allComment {
        font-size: 16rem;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-top: 16rem;
        padding-bottom: 16rem;

        span {
            font-size: 14rem;
            margin-left: 4rem;
        }
    }

    .commentItem {
        width: 100%;
        margin-top: 10rem;
        position: relative;

        .top {
            height: 40rem;
            width: 100%;
            display: flex;

            img {
                width: 40rem;
                height: 40rem;
                border-radius: 50%;
                object-fit: cover;
            }

            .right {
                margin-left: 10rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .nickName {
                    font-size: 15rem;
                    font-weight: 500;
                    color: rgba(102, 102, 102, 1);
                }

                .time {
                    font-size: 13rem;
                    font-weight: 400;
                    color: rgba(204, 204, 204, 1);
                }
            }
        }

        .commentContent {
            width: 100%;
            // min-height: 92rem;
            // max-height: 128rem;
            margin-top: 14rem;
            border-bottom: 1rem solid rgba(230, 230, 230, 1);
            padding-bottom: 14rem;

            p {
                width: 100%;
                min-height: 40rem;
                max-height: 156rem;
                font-size: 15rem;
                font-weight: 500;
                line-height: 20rem;
                color: rgba(51, 51, 51, 1);
                // 超出隐藏
                word-break: keep-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 8;
                overflow: hidden;
                box-sizing: content-box;
                text-align: justify;
                word-wrap: break-word;
            }

        }

        .delete {
            position: absolute;
            top: 8rem;
            right: 12rem;
            width: 18rem;
            height: 18rem;
            border-radius: 50%;
            border: 1rem solid rgba(100, 46, 142, 1);
            line-height: 16rem;
            text-align: center;
            font-size: 14rem;
        }
    }
}
</style>